<template>
  <div class="tabs">
    <div
      v-for="item in options"
      :key="item.value"
      class="tab-item"
      :class="{ active: tab === item.value }"
      @click="handleClick(item.value)"
    >
      {{ item.label }}
    </div>
  </div>
</template>

<script setup lang="ts">
type Props = {
  options: any[]
  tab: number
}

defineProps<Props>()

const emits = defineEmits(['clickTab'])

const handleClick = (tab) => {
  emits('clickTab', tab)
}
</script>

<style lang="less" scoped>
.tabs {
  display: flex;
  align-items: center;
  height: 22px;
}

.tab-item {
  position: relative;
  width: 98px;
  margin-left: -28px;
  color: rgb(133, 152, 187);
  font-size: 14px;
  background: url('@/assets/img/road/tab_bg.png') center center no-repeat;
  background-size: contain;

  &:nth-of-type(1) {
    margin-left: 0;
    z-index: 3;
  }

  &:nth-of-type(2) {
    z-index: 2;
  }

  &:nth-of-type(3) {
    z-index: 1;
  }

  &.active {
    color: #fff;
    z-index: 5;
    background: url('@/assets/img/road/tab_active.png') center center no-repeat;
    background-size: contain;
  }
}
</style>
